Q: 倒數 8 篇了！逐漸進入養老階段，會一直Loading嗎？
A: Loading只是代表，主要是可以看看有哪些變化～～

幾天前有出個文字版本的Loading，本篇要接著繼續來做更多變化～～
CSS微動畫 - Loading來了！終於要出款文字版本的了！

/* 以下每個範例都將使用相同的基礎html及css，如下：*/
<style>
  .container {
    display: inline-flex;
    letter-spacing: 10px;
  }
  .text {
    font-size: 60px;
    font-weight: bold;
  }
  .text:nth-child(2) {
    animation-delay: .1s;
  }
  .text:nth-child(3) {
    animation-delay: .2s;
  }
  .text:nth-child(4) {
    animation-delay: .3s;
  }
  .text:nth-child(5) {
    animation-delay: .4s;
  }
  .text:nth-child(6) {
    animation-delay: .5s;
  }
  .text:nth-child(7) {
    animation-delay: .6s;
  }
</style>

<div class="container">
  <div class="text">L</div>
  <div class="text">O</div>
  <div class="text">A</div>
  <div class="text">D</div>
  <div class="text">I</div>
  <div class="text">N</div>
  <div class="text">G</div>
</div>

波浪Loading～

想要做到文字有波浪效果，調整height是做不到的，因為文字不會因為容器的寬高而調整大小，這時候可以使用transform的scaleY，Y軸調整元素垂直方向的縮放，如果只調整Y軸的縮放，X軸是不會變的，這時候就可以達到想要的效果。另外transform-origin設定bottom讓元素在縮放的過程是以底部為軸心縮放，沒有的話效果就會看起來完全不一樣！

<style>
  .text {
    animation: scaleY .8s infinite;
    transform-origin: bottom;
  }
  @keyframes scaleY {
    50% {
      transform: scaleY(.5);
    }
  }
</style>

淡出漸入Loading～

這個範例比較特別有在父層設置overflow: hidden，並對文字設置animation-fill-mode: backwards，backwards的設定會讓文字在animation-delay期間，讓樣式維持在animation的第一個的畫面。

<style>
  .container {
    overflow: hidden;
  }
  .text {
    animation: animateToRight 3s infinite;
    animation-fill-mode: backwards;
  }
  @keyframes animateToRight {
    0% {
      transform: translateX(300px);
    }
    20%, 60% {
      opacity: 1;
      transform: translateX(0);
    }
    90%, 100% {
      opacity: 0;
      transform: translateX(-300px) scale(.2);
    }
  }
</style>

翻滾Loading～

之前的按鈕有使用::before做出底線，這次跟Loading效果結合也別有一番風味～

<style>
  .container {
    position: relative;
    overflow: hidden;
  }
  .container::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    height: 5px;
    width: 30px;
    background-color: Black;
    box-shadow: 2px 2px 3px Black;
    animation: goBorder 2s infinite;
  }
  .text {
    animation: textRotate 2s infinite;
    text-shadow: 2px 2px 3px Black;
  }
  @keyframes goBorder {
    0% {
      left: -30px;
    }
    50%, 100% {
      left: 100%;
    }
  }
  @keyframes textRotate {
    50%, 100% {
      transform: rotateZ(360deg) rotateY(360deg);
    }
  }
</style>

下一篇一樣會是Loading，但會藉由下一篇的例子講解animation帶來的效能影響，敬請期待！

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！